<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <!-- 循坏遍历数组展示 -->
    <h1 v-for="item in strData">{{item}}</h1>
    <!--响应式的-->
    <button @click="butShift">数组方法 Shift</button>
    <button @click="butPop">数组方法 pop</button>
    <button @click="butUnshift">数组方法 unshift</button>
    <button @click="butPush">数组方法 push</button>
    <button @click="butSplice">数组方法 splice</button>
    <button @click="butSort">数组方法 sort</button>
    <button @click="butReverse">数组方法 reverse</button>
    <!-- 不是响应式的 -->
    <button @click="butIndex">数组索引修改数据</button>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            strData: ['AAAA','BBBB','CCCC','DDDD']
        },
        methods:{
            butShift () {
                //删除数组第一个元素
                this.strData.shift();
            },
            butPop () {
                //删除数组最后一个元素
                this.strData.pop();
            },
            butUnshift () {
                //在数组的最前面添加一个数组值，也能添加多个
                this.strData.unshift("aaa");
                // this.strData.unshift("aaa","bbb");
            },
            butPush () {
                //在数组的最后面添加一个数组值，也能添加多个,元素都是
                this.strData.push("ggg");
                // this.strData.push("ggg","hhh");
            },
            butSplice: function () {
                //有三个作用：删除元素、插入元素、替换元素
                //删除元素：第一个参数就开始的位置，第二个就是删除几个元素（不传就删除后面全部的元素）
                // this.strData.splice(1);
                this.strData.splice(1,1);
                //替换元素：第一个参数就开始的位置，第二个就是我们要替换的几个元素，后面就是我们替换的元素
                // this.strData.splice(1, 2, 'rrr', 'ttt');
                //插入元素：第一个参数就开始的位置，第二个参数就是0，后面就是我们插入的元素
                // this.strData.splice(1, 0, 'rrr', 'ttt');
            },
            butSort () {
                //在数组正序排序
                this.strData.sort();
            },
            butReverse () {
                //在数组倒序排序
                this.strData.reverse();
            },
            butIndex() {
                //注意：通过索引值来修改数组的值，是不会响应到dom上的
                // this.strData[0] = "FFFFF";
                //开始使用Vue的内部函数set来修改
                Vue.set(this.strData, 0, "FFFFF");
            }
        }
    });
</script>
</html>





















